<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        .lun{
            width:500px;
            height:400px;
            overflow: hidden;
            position: relative;
        }
        .box{
            position:absolute;
            left:0;
            top:0;
        }
    </style>
</head>
<body>
<div class="lun">
    <div class="box">
        <img src="0.jpg"/><img src="800.jpg"/><img src="0.jpg"/><img src="800.jpg"/><img src="640.jpg"/><img src="0.jpg"/>
    </div>
</div>
<script>
    var lun=document.querySelector(".lun");
    function lunBo(obj){
        var aImg=obj.getElementsByTagName("img");
        var oDiv=obj.querySelector(".box");
        var len=aImg.length;
        var start=1;
        setInterval(function(){
            if(start===len){
                start=0;
                oDiv.style.top="0px";
            }else{
                start++;
                oDiv.style.top=-start*400+"px";
            }
        },1000);
    }
    lunBo(lun);
</script>
</body>
</html>